<template>
  <div>
    <div class="search-nav">
      <div class="search-nav-container">
        <ul>
<!--          <li v-for="(item, index) in category" :key="index" >-->
<!--            <span @click="getProductByClass(item.categoryId)">{{item.categoryName}}</span>-->
<!--          </li>-->

          <li>全部商品分类</li>
          <!--循环所有的分类-->
          <li>
          </li>
          <li><router-link to="/">首页</router-link></li>
          <li><router-link to="/">服装城</router-link></li>
          <li><router-link to="/">美妆馆</router-link></li>
          <li><router-link to="/">BIT超市</router-link></li>
          <li><router-link to="/">生鲜</router-link></li>
          <li><router-link to="/">全球购</router-link></li>
          <li><router-link to="/">闪购</router-link></li>
          <li><router-link to="/">拍卖</router-link></li>
          <li><router-link to="/">金融</router-link></li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script>

// eslint-disable-next-line standard/object-curly-even-spacing
import { category} from '../../api/category';
export default {
  name: 'GoodsListNav',
  data () {
    return {
      category: []
    };
  },
  methods: {
    init (url, config) {
      category().then((res) => {
        if (res.data.code === '00000') {
          this.category = res.data.data;
        } else {
          this.$Message.error(res.data.message);
        }
      }).catch(error => {
        this.$Message.error(error.message);
      });
    },
    getProductByClass (id) {
      // 跳转到商品管理界面
      this.$router.push({
        path: '/goodsList',
        query: {categoryId: id}
      });
      // console.log(id);
      // console.log(id);
      // console.log('开心');
      // allProductInfo(id).then(res => {
      //   console.log(id);
      //   console.log('快乐');
      // this.$Message.success(id);
      //   });
      // }
    }
  },

  mounted () {
    this.init();
  }
};
</script>

<style scoped>
.search-nav{
  width: 100%;
  height: 64px;
  border-bottom: 2px solid #B1191A;
}
.search-nav-container{
  width: 80%;
  min-width: 1000px;
  height: 64px;
  margin: 0px auto;
}
.search-nav-container-90{
  width: 90%;
}
.search-nav-container ul{
  margin: 0px;
  padding-left: 0px;
  list-style: none;
}
.search-nav-container li{
  cursor: pointer;
  margin-left: 30px;
  line-height: 64px;
  color: #C81623;
  font-size: 18px;
  /*font-weight: bold;*/
  float: left;
}
.search-nav-container a{
  color: #C81623;
  text-decoration: none;
}

</style>
